<!-- add by lty 20181222 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>日常保洁</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/common.css">    
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/serverRichang.css">
    
     <!-- 插件js -->
    <script src="js/jquery/3.2.1/jquery.min.js"></script>
    <script src="../js/zepto.js"></script>
	<script src="../js/sm.js" ></script>
	<script src="../js/sm-extend.js" ></script>
	<script src="../js/request.js"></script>
    <script src="../../jsp/js/pointlog.js"></script>
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> 
    <script src="../js/request.js"></script>
    <script src="../../js/common.js"></script>
    <style type="text/css">
   .addmore{
    text-align: -webkit-center;
    padding-top: 10px;
    cursor: pointer;
    }
    </style>
  </head>
 
    <script type="text/javascript">
	 window.$$=window.Zepto = Zepto;
	 var args=ponitLog.getWindowsParam();
	</script>
  <body>
    <div class="baojie-main">
      <!-- 主体内容 -->
      <div class="m-banner">
        <div class="banner margin">
          <img src="../../images/service_ban.jpg" alt="" />
        </div>
        <div class="ban-txt margin">
          <h2>日常保洁</h2>
          <p class="p2">家庭室内表面清洁、物品整理、基础除尘除垢</p>
        </div>
      </div>

      <!-- part-01 -->
      <div class="gn-title"> <!-- 公共title -->
        <h2>服务价格</h2>
<!--         <span>（蓝居租客价：低至35元/小时）</span> -->
      </div>
      <div class="part-1 margin cl">
        <div class="p1-left fl">
          <h3>日常保洁</h3>
          <p>2小时起</p>
        </div>
        <div class="p1-right fr">
          <b class="sp1 D_content--money" >0</b>
          <span class="sp2">元/小时</span>
        </div>
      </div>

      <!-- part-02 -->
      <div class="gn-title">
        <h2>参考耗时</h2>
      </div>
      <div class="part-2">
        <div class="time-line">
          <ul>
            <li>
              <span class="sp-1">≤50㎡</span>
              <span class="sp-2">2小时</span>
            </li>
            <li>
              <span class="sp-1">50-90㎡</span>
              <span class="sp-2">3小时</span>
            </li>
            <li>
              <span class="sp-1">91-120㎡</span>
              <span class="sp-2">4小时</span>
            </li>
            <li>
              <span class="sp-1">121-150㎡</span>
              <span class="sp-2">5小时</span>
            </li>
            <li>
              <span class="sp-1">≥151㎡</span>
              <span class="sp-2">6小时</span>
            </li>
          </ul>
        </div>
        <div class="time-tips margin">此时长仅供参考，请您根据打扫面积和房屋洁净程度合理预估服务时长</div>
      </div>

      <!-- part-03 -->
      <div class="gn-title">
        <h2>服务范围</h2>
        <span>全屋清洁，专业高效</span>
      </div>
      <div class="part-3 margin">
        <ul class="cl" >
          <li>
            <span class="sp-01 icon01"></span>
            <span class="sp-02">客厅</span>
          </li>
          <li>
            <span class="sp-01 icon02"></span>
            <span class="sp-02">卫生间</span>
          </li>
          <li>
            <span class="sp-01 icon03"></span>
            <span class="sp-02">卧室</span>
          </li>
          <li>
            <span class="sp-01 icon04"></span>
            <span class="sp-02">厨房</span>
          </li>
          <li>
            <span class="sp-01 icon05"></span>
            <span class="sp-02">餐厅</span>
          </li>
          <li>
            <span class="sp-01 icon06"></span>
            <span class="sp-02">阳台</span>
          </li>
        </ul>
      </div>

      <!-- part-04 -->
      <div class="gn-title">
        <h2>服务标准</h2>
        <span>八大标准，服务到位</span>
      </div>
      <div class="part-4 margin">
        <ul class="cl" id="serviceStandard">
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/bz-1.jpg" alt="" />
            </p>
            <p class="p-txt esp1">家居表面擦拭无尘</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/bz-2.jpg" alt="" />
            </p>
            <p class="p-txt esp1">物品分类整理归位</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/bz-3.jpg" alt="" />
            </p>
            <p class="p-txt esp1">地面洁净无水渍</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/bz-4.jpg" alt="" />
            </p>
            <p class="p-txt esp1">家电厨电表面无尘</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/bz-5.jpg" alt="" />
            </p>
            <p class="p-txt esp1">油烟机灶台表面无油渍</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/bz-6.jpg" alt="" />
            </p>
            <p class="p-txt esp1">马桶五金件洁净光亮</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/bz-7.jpg" alt="" />
            </p>
            <p class="p-txt esp1">门窗洁净无尘光亮</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/bz-8.jpg" alt="" />
            </p>
            <p class="p-txt esp1">垃圾倾倒跟换垃圾袋</p>
          </li>
        </ul>
      </div>

      <!-- part-05 -->
      <div class="gn-title">
        <h2>服务亮点</h2>
        <span>四大细节，贴心细致</span>
      </div>
      <div class="part-4 margin">
        <ul class="cl">
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/ld-1.JPG" alt="" />
            </p>
            <p class="p-txt esp1">床上用品衣物整理归位</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/ld-2.JPG" alt="" />
            </p>
            <p class="p-txt esp1">水池内碗筷清洁无污</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/ld-3.JPG" alt="" />
            </p>
            <p class="p-txt esp1">家居鞋柜整理无尘</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/dailyClean/ld-4.JPG" alt="" />
            </p>
            <p class="p-txt esp1">垃圾桶干净清洁</p>
          </li>
        </ul>
      </div>

      <!-- part-06 -->
      <div class="gn-title">
        <h2>温馨提示</h2>
      </div>
      <div class="part-6 margin">
        <ul id="tip"></ul>
      </div>

      <!-- part-07 -->
      <div class="gn-title">
        <h2>专业工具</h2>
        <span>高端品牌，安全优质</span>
      </div>
      <div class="part-4 margin">
        <ul class="cl">
          <li>
            <p class="p-img">
              <img src="./images/beibao.jpg" alt="" />
            </p>
            <p class="p-txt esp1">清洁背包</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/gongju.jpg" alt="" />
            </p>
            <p class="p-txt esp1">清洁工具箱</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/zhengqiji.jpg" alt="" />
            </p>
            <p class="p-txt esp1">高温蒸汽机</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/qingjieji.jpg" alt="" />
            </p>
            <p class="p-txt esp1">清洁剂</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/shensuo.jpg" alt="" />
            </p>
            <p class="p-txt esp1">清洁毛巾</p>
          </li>
          <li>
            <p class="p-img">
              <img src="./images/maotou.jpg" alt="" />
            </p>
            <p class="p-txt esp1">拖把毛头</p>
          </li>
        </ul>
      </div>

      <!-- part-08 -->
      <div class="gn-title">
        <h2>服务保障</h2>
        <span>三重认证，以优选优</span>
      </div>
      <div class="part-8 margin">
        <ul class="cl">
          <li>
            <span class="sp-01 icon01"></span>
            <span class="sp-02">公安局联网<br />备案认证</span>
          </li>
          <li>
            <span class="sp-01 icon02"></span>
            <span class="sp-02">健康证明<br />严格审核</span>
          </li>
          <li>
            <span class="sp-01 icon03"></span>
            <span class="sp-02">工作经验<br />技能认证</span>
          </li>
        </ul>
        <div class="bz-block">
          <div class="bz-line cl">
            <div class="bz-left fl">
              <img src="./images/dailyClean/kf-img.jpg" alt="" />
            </div>
            <div class="bz-right fl">
              <h4>专业客服，保障权益</h4>
              <p class="p1">客服团队快捷相应，如遇问题，请拨打客服热线 <a href="tel:0756-2543354">0756-2543354</a></p>
            </div>
          </div>
        </div>
      </div>

      <!-- part-09 -->

      <div class="gn-title ">
        <h2>用户评价</h2>
      </div>
      <div class="part-9 margin ">
        <ul id="comment">
          
        </ul>
       <div class="addmore"><a id="addmore">加载更多</a></div> 
      </div>

    </div>

    <div class="f-bottom">
      <a href="javascript:;" class="D_reserve--btn btn">立即预定</a>
    </div>
  </body>
    <script type="text/javascript">
    var serviceId = Request.queryString("serviceId");
    var path = "/LanJuPublic";
    var chargesType;//收费类型：1-按月、2-按小时
    var price;
    var months;
    var offset=0;
    $(function(){
    	queryServiceDetailById();
    	getCommentList(0);
	})
	
	function queryServiceDetailById(){
	$$.showPreloader("加载中");
	$.ajax({
		url : path+"/service/queryServiceDetailById.do",
		data : {
			serviceId: serviceId
		},
		type : "GET",
		dataType : 'json',
		cache : false,
		success : function(ret){
			console.log(ret);
			$$.hidePreloader();
			if(ret.serverList && ret.serverList.length>0){
				$.each(ret.serverList,function(i,n){
					$(".title").html(n.serviceName);
					$(".serverTitle").html(n.serviceName);
					$(".con_clean--detail").html(n.serviceContent);
					$("#tip").html(n.tip);
					chargesType = n.chargesType;
					months = n.serviceCount;
					
				});
			}
			if(ret.priceList && ret.priceList.length>0){
				$.each(ret.priceList,function(i,n){
					$(".D_content--money").text(n.price);
					price=n.price;
				});
			}
			if(ret.imgList && ret.imgList.length>0){
				var html='';
				var html1='';
				$.each(ret.imgList,function(i,n){
					if(n.type == 2){
						html+="<li><p class=\"p-img\">";
						html+="<img src=\""+n.imgUrl+"\" />";
				        html+="</p>";    
				        html+="<p class=\"p-txt esp1\">"+n.imgName+"</p>";     
				        html+="</li>";   
					}else if(n.type == 3){
					}
				});
				
			}
		},
		error: function(){
			$$.hidePreloader();
			$$.toast("加载出错");
		}
	});
}
    
    $(".D_reserve--btn").click(function(){
    	$.ajax({
    		url : path+"/service/queryUserMsg.do",
    		data : {
    			
    		},
    		type : "GET",
    		dataType : 'json',
    		cache : false,
    		success : function(ret){
    			console.log(ret);
    			if(ret.result==false){
    				window.location.href="../login.html";
    			}else{
    				if(chargesType == 1){
        	    		window.location.href="../service/cleanOrder.html?serviceId="+serviceId;
        			}else{
        				window.location.href="../service/orderConfirm.html?serviceId="+serviceId+"&chargesType=2&price="+(ret.res?"35":price)+"&months="+months;
        			}
    			}
    		}
    	})
    })
    
    function getCommentList(offset){
    	$.ajax({
    		url : "../../serviceComment/getCommentList.do",
    		data : {
    			"serviceId" : serviceId,
    			"offset" : offset,
    			"limit" : 10
    		},
    		type : "GET",
    		dataType : 'json',
    		cache : false,
    		success : function(ret){
    			var html = "";
    			if(ret.rows !=null && ret.rows.length>0){
    				for(var i=0;i<ret.rows.length;i++){
    				var data =ret.rows[i];
    				html += "<li><div class=\"pl-top cl\">";
    				html += "<span class=\"t-head fl\" style=\"background: url("+data.headImg.split(",")[0]+") no-repeat;background-size:100% 100%;    border-radius: 100px;\"></span>";
    	            html += "<div class=\"t-txt fl\">";
    	            html += " <em>"+data.userName+"</em>";  
    	            html += "<div class=\"comment--xing\">";  
    	            if(data.level != null){
    	            	for(var j=0;j<parseInt(data.level);j++){
       	            	 html += "<i class=\"icon icon-star-full\"></i>";  
       	           		 }
    	            }
    	            html += " </div></div></div>";
    	            html += "<div class=\"comment-text\">"+data.commentContent.split("\"")[1];  
    	            html += " </div> </li>";
    				} 
    	         $("#comment").append(html);
    			}else{
    				$("#addmore").text("没有更多数据");
    			}
    		}
    	})
    }
    
    $("#addmore").click(function(){
    	offset+=10;
    	getCommentList(offset);
    })
    </script>
</html>